<template>
  <waterfall :col="2" :data="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]">
    <div class="pr pbImgBox" v-for="datas in hot1" :key="datas.id">
      <img :src="datas.imgs" /><br />
      <div class="use">
        <p>{{ datas.content }}</p>
        <span>使用</span>
      </div>
    </div>
    <!-- <p class="p1">1111</p> -->
  </waterfall>
</template>

<script>
export default {
  created() {
    this.$store.dispatch("getnewhot", { url: "/data/one" });
  },
  computed: {
    hot1() {
      return this.$store.state.hot.newhot;
    },
  },
};
</script>

<style scoped>
/* @import url(../../assets/font_3120944_vffe3j0uc/iconfont.css);
@import url(../../assets/font_3140785_kqxah9f035p/iconfont.css); */

.waterfull {
  width: 100%;
  background-color: red;
  height: 8rem;
  margin-bottom: .2rem;
}

.pbImgBox {
  /* width: 100%;
    height: 8rem; */
  margin-left: 0.12rem;
}
img {
  width: 1.6rem;
  border-radius: 0.12rem;
}
.use {
  width: 1.6rem;
  height: 0.54rem;
  background-color: white;
  display: flex;
  justify-content: space-between;
}
.use p {
  width: 100%;
  height: 100%;
  padding: 0.15rem 0 0.25rem 0;
  box-sizing: border-box;
  font-size: 0.12rem;
  color: #c2c2c2;
}
.use span {
  width: 0.58rem;
  height: 0.25rem;
  background-color: #fff5f4;
  color: #fc5c5c;
  text-align: center;
  line-height: 0.25rem;
  border-radius: 0.12rem;
  display: inline-block;
  font-size: 0.14rem;
  font-weight: bold;
  margin-top: 0.1rem;
}
</style>